<template>
	<view class="page">
		<!-- #ifdef MP-WEIXIN -->
		<image :src="posterData" :style="{ width: posterSize.width + 'px', height: posterSize.height + 'px' }"
			mode="scaleToFill" v-if="posterData" show-menu-by-longpress />
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<image :src="posterData" :style="{ width: posterSize.width + 'px', height: posterSize.height + 'px' }"
			mode="scaleToFill" v-if="posterData" />
		<!-- #endif -->
		<canvas type="2d" :style="{ width: posterSize.width + 'px', height: posterSize.height + 'px' }" canvas-id="poster"
			id="poster" :class="{ 'd-none': posterData }"></canvas>
		<view class="custom padding" v-if="info.new_technicians_gift_register_silver>0&& info.new_technicians_gift_register_gold">
			<u-divider text="邀请注册可获得" dashed></u-divider>
			<view class="item padding bg-white radius-xl margin-bottom coupon" v-if="info.new_technicians_gift_register_gold>0">
				<view class="money-text text-center solid-right padding-right">
					<view class="money text-red">
						<text class="number text-bold">{{ info.new_technicians_gift_register_gold }}</text>
					</view>
					<view class="text-red text-sm">
						金券
					</view>
				</view>
				<view class="right crow">
					<view class="nameBox margin-left">
						<view class="name text-black text-bold padding-bottom-xs">
							推荐位兑换金券
						</view>
						<view class="min text-gray">
							<text>金券可用户兑换首页推荐展示时间</text>
						</view>
					</view>
				</view>
			</view>
			<view class="item padding bg-white radius-xl margin-bottom coupon" v-if="info.new_technicians_gift_register_silver>0">
				<view class="money-text text-center solid-right padding-right">
					<view class="money text-red">
						<text class="number text-bold">{{ info.new_technicians_gift_register_silver }}</text>
					</view>
					<view class="text-red text-sm">
						银券
					</view>
				</view>
				<view class="right crow">
					<view class="nameBox margin-left">
						<view class="name text-black text-bold padding-bottom-xs">
							推荐位兑换银券
						</view>
						<view class="min text-gray">
							<text>银券可用户兑换首页推荐展示时间</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="custom padding" v-if="info.new_technicians_gift_first_order_silver>0&& info.new_technicians_gift_first_order_gold">
			<u-divider text="完成首单可获得" dashed></u-divider>
			<view class="item padding bg-white radius-xl margin-bottom coupon" v-if="info.new_technicians_gift_first_order_gold>0">
				<view class="money-text text-center solid-right padding-right">
					<view class="money text-red">
						<text class="number text-bold">{{ info.new_technicians_gift_first_order_gold }}</text>
					</view>
					<view class="text-red text-sm">
						金券
					</view>
				</view>
				<view class="right crow">
					<view class="nameBox margin-left">
						<view class="name text-black text-bold padding-bottom-xs">
							推荐位兑换金券
						</view>
						<view class="min text-gray">
							<text>金券可用户兑换首页推荐展示时间</text>
						</view>
					</view>
				</view>
			</view>
			<view class="item padding bg-white radius-xl margin-bottom coupon" v-if="info.new_technicians_gift_first_order_silver>0">
				<view class="money-text text-center solid-right padding-right">
					<view class="money text-red">
						<text class="number text-bold">{{ info.new_technicians_gift_first_order_silver }}</text>
					</view>
					<view class="text-red text-sm">
						银券
					</view>
				</view>
				<view class="right crow">
					<view class="nameBox margin-left">
						<view class="name text-black text-bold padding-bottom-xs">
							推荐位兑换银券
						</view>
						<view class="min text-gray">
							<text>银券可用户兑换首页推荐展示时间</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
let CanvasContext, canvas;
export default {
	data() {
		return {
			posterData: '',
			posterSize: {
				width: 0,
				height: 0
			},
			info: {},
			sInfo: {},
			proportion: 1,
			step: 0
		};
	},
	computed: {
		...mapState({
			USERINFO: state => state.USER.USERINFO,
			WEBCONFIG: state => state.WEBCONFIG,
		})
	},
	onReady() {
		// #ifdef H5
		CanvasContext = uni.createCanvasContext('poster');
		// #endif
		// #ifdef MP-WEIXIN
		const query = wx.createSelectorQuery()
		query.select('#poster')
			.fields({ node: true, size: true })
			.exec((res) => {
				canvas = res[0].node
				const ctx = canvas.getContext('2d')

				const dpr = wx.getSystemInfoSync().pixelRatio
				canvas.width = res[0].width * dpr
				canvas.height = res[0].height * dpr
				ctx.scale(dpr, dpr)
				CanvasContext = ctx;
				this.info.qrcode && this.draw();
			})
		// #endif
	},
	onLoad() {
		this.sInfo = this.$utils.$system.info();
		this.posterSize = {
			width: this.sInfo.windowWidth,
			height: this.sInfo.windowHeight
		};
		this.newUserGift();
	},
	methods: {
		newUserGift() {
			this.$utils.$api.User.newUserGift().then(data => {
				this.info = data;
				// #ifdef MP-WEIXIN
				this.info.qrcode = this.info.qrcode + '&platform=mp-weixin';
				// #endif
				CanvasContext && this.draw();
			}).catch(err => {
				this.$utils.$message.error(err.msg);
			})
		},
		drawImage(url, x, y, w, h) {
			// #ifdef H5
			uni.getImageInfo({
				src: url,
				success: (res) => {
					CanvasContext.drawImage(res.path, x, y, w, h);
					this.step++;
					this.draw();
				},
			})
			// #endif
			// #ifdef MP-WEIXIN
			const image = canvas.createImage();
			image.onload = () => {
				// 将图片绘制到 canvas 上
				CanvasContext.drawImage(image, x, y, w, h);
				this.step++;
				this.draw();
			}
			image.src = url;
			// #endif
		},
		draw() {
			const qecodeSize = 78 * this.proportion;
			const avatarSize = 30 * this.proportion;
			switch (this.step) {
				case 0:
					uni.getImageInfo({
						src: `${this.$utils.$http.baseHOST}image/technician_poster.png`,
						success: (res) => {
							this.proportion = this.sInfo.windowWidth / (res.width / 2);
							this.posterSize = {
								width: this.sInfo.windowWidth,
								height: (res.height / 2) * this.proportion
							};
							CanvasContext.drawImage(res.path, 0, 0, this.posterSize.width, this.posterSize.height);
							CanvasContext.textBaseline = 'top';
							CanvasContext.fillStyle = '#035219';
							CanvasContext.font = 'bold 18px sans-serif';
							CanvasContext.fillText(
								`立即进入 ${this.WEBCONFIG.web_name}`,
								63 * this.proportion,
								612 * this.proportion
							);
							this.step++;
							this.draw();
						},
					})
					break;
				case 1:
					this.drawImage(this.info.qrcode, this.posterSize.width - (qecodeSize + (this.posterSize.width * 0.05)), this.posterSize.height - (qecodeSize + 8), qecodeSize, qecodeSize);
					CanvasContext.save();
					break;
				case 2:
					const x = 70 * this.proportion;
					const y = 515* this.proportion;
					// #ifdef H5
					CanvasContext.beginPath(); // 开始创建一个路径
					CanvasContext.arc(
						x+avatarSize / 2,
						y+avatarSize / 2,
						avatarSize / 2,
						0,
						Math.PI * 2,
						false
					);
					// 给头像加一个2px白边
					CanvasContext.strokeStyle = '#FFFFFF';
					CanvasContext.lineWidth = 4 * this.proportion;
					CanvasContext.stroke();
					// 画一个圆形裁剪区域
					CanvasContext.clip();
					// 绘制头像图片
					this.drawImage(this.USERINFO.headimg, x , y , avatarSize, avatarSize);
					CanvasContext.save();
					// #endif
					CanvasContext.restore();
					break;
				case 3:
					// #ifdef H5
					CanvasContext.draw(false, () => {
						uni.hideLoading();
						this.saveImage();
					});
					// #endif
					// #ifdef MP-WEIXIN
					uni.hideLoading();
					setTimeout(() => {
						wx.canvasToTempFilePath({
							canvasId: 'poster',
							canvas: canvas,
							success: (res) => {
								this.posterData = res.tempFilePath;
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									title: '生成图片失败',
									icon: 'none',
									duration: 2000
								})
							}
						})
					}, 100);
					// #endif
					break;
			}
		},
		saveImage() {
			uni.canvasToTempFilePath({
				canvasId: 'poster',
				success: (res) => {
					this.posterData = res.tempFilePath;
				},
				fail: (err) => {
					console.log(err);
					uni.showToast({
						title: '生成图片失败',
						icon: 'none',
						duration: 2000
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	width: 100vw;
	min-height: calc(100vh - var(--window-top));
	display: block;
}

.d-none {
	display: none;
}

.item {
	display: flex;
	align-items: center;
	position: relative;

	.money-text {
		width: 170upx;

		.money {
			.number {
				font-size: 40upx;
			}
		}
	}

	.right {
		flex: 1;
		justify-content: space-between;

		.nameBox {
			.name {
				font-size: 30upx;
			}

			.min {
				font-size: 24upx;
			}
		}
	}
}

.coupon::before,
.coupon::after {
	content: "";
	position: absolute;
	background-color: #f5f5f7;
	width: 20upx;
	height: 20upx;
}

.coupon::before {
	top: 0;
	right: 25%;
	border-radius: 0 0 50% 50%;
}

.coupon::after {
	bottom: 0;
	right: 25%;
	border-radius: 50% 50% 0 0;
	/* 底部两个半圆 */
}
</style>
